<script setup lang="ts">
import { user } from '@/apis/user'
import { useRequest } from 'alova/client'
const { data, send } = useRequest(user, {
  immediate: false,
})

const localeStore = useLocaleStore()

function handleChange(event: Event) {
  const target = event.target as HTMLSelectElement | null
  const value = target?.value || ''
  localeStore.changeLocale(value)
}

const userStore = useUserStore()
</script>

<template>
  <main class="flex flex-col gap-10 p-4">
    <div class="card">
      <div class="b-b-1 b-b-solid">图标</div>
      <div class="p-2">
        <div class="i-icons:hot w-20 h-20 text-red"></div>
      </div>
    </div>
    <div class="card">
      <div class="b-b-1 b-b-solid">请求</div>
      <div class="p-2">
        <button class="button" @click="send(1)">发送请求</button>
        <div>
          {{ data }}
        </div>
      </div>
    </div>

    <div class="card">
      <div class="b-b-1 b-b-solid">本地化</div>
      <div class="p-2">
        <div>当前语言:{{ localeStore.locale }}</div>
        <select :value="localeStore.locale" @change="handleChange">
          <option value="zh-CN">中文</option>
          <option value="en">英文</option>
        </select>
      </div>
    </div>

    <div class="card">
      <div class="b-b-1 b-b-solid">登录</div>
      <div class="p-2">
        <div>
          当前用户:{{
            userStore.isLogin && userStore.isLoadInfo ? userStore.user?.nickname : '未登录'
          }}
        </div>
        <div class="p-2">
          <button
            class="button"
            @click="
              userStore.login({
                username: 'admin',
                password: '123456',
              })
            "
          >
            登录
          </button>
        </div>
      </div>
    </div>
  </main>
</template>
